es6 import的路径问题

在导入

This dependency was not found:

* /src/store/function in ./src/store/modules/checklist/index.js, ./src/store/modules/checklist/mutations.js

问题原因:

export default 的用法

export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export deault命令只能使用一次。所以,import命令后面才不用加大括号,相反其它的export 输出 可以有多个,且import时必须加大括号,示例如下

1
2
3
4
5
6
7
8
9
10
11
12
// modules.js
function add(x, y) {
return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as xxx } from 'modules';
// 等同于
// import xxx from 'modules';

正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句,而export需要跟变量声明或者大括号作为输出:

1
2
3
4
5
6
7
8
9
10
// 正确
export var a = 1;

// 正确
var a = 1;
export default a;  // 写法1
export {a}  // 写法2

// 错误
export default var a = 1;

import 时候的路径问题(作为新手,遇到一些坑,刚好记录下)

开始玩的时候,总是出现 cannot find module 问题,原来 在 import 的时候 如果不使用相对路径或者绝对路径,node默认会去node_modules/文件夹下去找,例如:

import * as obj from 'exports'
// node 会试着去寻找 node_modules/exports.js 模块
 
// 正确写法
 import * as obj from './exports'

关于 import * as obj from ‘xx’ 这种写法是把所有的输出包裹到obj对象里

对了,还有模块的继承写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// circle.js
export var a = 1;

// circleplus.js 当前模块继承了 circle 模块的所有输出
// 此处只是继承了输出,并不能直接使用

export * from 'circle';
export var e = 2.71828182846;
export default function(x) {
return Math.exp(x);
}

// 继承之后,circleplus.js 相当于下面代码
export var a = 1;
export var e = 2.71828182846;
export default function(x) {
return Math.exp(x);
}